<template>
	<el-card>
		<div class="scheduleRecordDivClass">
			<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
				<el-form-item>
					<el-input v-model="state.queryForm.groupName" placeholder="请输入调度组名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="state.queryForm.groupOwner" placeholder="请输入调度组负责人"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button :icon="Search" @click="getDataList()" type="primary">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button :icon="Refresh" @click="resets">重置</el-button>
				</el-form-item>
				<el-form-item>
					<el-button :icon="Plus" type="primary" v-auth="'task-scheduling:scheduler-group:save'" @click="addOrUpdateHandle()">新建调度组</el-button>
				</el-form-item>
			</el-form>
			<el-table
				v-loading="state.dataListLoading"
				:height="cardDetailsTableHeight"
				:data="state.dataList"
				border
				@selection-change="selectionChangeHandle"
			>
				<el-table-column label="序号" type="index" width="60" align="center"> </el-table-column>
				<el-table-column prop="id" label="调度组ID" header-align="center" align="center"></el-table-column>
				<el-table-column prop="groupName" label="调度组名称" header-align="center" align="center">
					<template #default="scope">
						<span @click="goToPage(scope.row)" style="color: #0f40f5; cursor: pointer">{{ scope.row.groupName }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="groupOwner" label="调度组负责人" header-align="center" align="center"></el-table-column>
				<el-table-column prop="name" label="调度组任务数（开启/关闭）" header-align="center" align="center">
					<template #default="scope">
						<span v-if="scope.row.totalNum">{{ scope.row.totalNum }}</span>
						(<span v-if="scope.row.openNum">{{ scope.row.openNum }}</span
						><span v-if="scope.row.closeNum">/{{ scope.row.closeNum }}</span
						>)
					</template>
				</el-table-column>
				<el-table-column prop="failNum" label="今日任务调度失败数" header-align="center" align="center"></el-table-column>
				<el-table-column prop="recordFailNum" label="今日任务执行失败数" header-align="center" align="center"></el-table-column>

				<el-table-column prop="createTime" label="创建时间" header-align="center" align="center"></el-table-column>
				<el-table-column prop="updateTime" label="更新时间" header-align="center" align="center"></el-table-column>
				<el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
					<template #default="scope">
						<el-button v-auth="'task-scheduling:scheduler-group:update'" type="primary" link @click="addOrUpdateHandle(scope.row.id, 'edit')"
							>编辑</el-button
						>
						<el-button v-auth="'task-scheduling:scheduler-group:update'" type="primary" link @click="addOrUpdateHandle(scope.row.id, 'details')"
							>详情</el-button
						>
						<el-button
							:disabled="scope.row.totalNum != 0 ? true : false"
							v-auth="'task-scheduling:scheduler-group:delete'"
							type="primary"
							link
							@click="deleteHandle(scope.row.id)"
							>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:current-page="state.page"
				:page-sizes="state.pageSizes"
				:page-size="state.limit"
				:total="state.total"
				layout="total, sizes, prev, pager, next, jumper"
				@size-change="sizeChangeHandle"
				@current-change="currentChangeHandle"
			>
			</el-pagination>
		</div>
		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
	</el-card>
</template>

<script setup lang="ts" name="Actuator-Mana">
import { useCrud } from '@/hooks'
import { reactive, ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { IHooksOptions } from '@/hooks/interface'
import AddOrUpdate from './add-or-update.vue'
import { ElMessage, ElMessageBox } from 'element-plus/es'
import { Delete, Edit, Search, Plus, CircleClose, Refresh } from '@element-plus/icons-vue'

const router = useRouter()
const state: IHooksOptions = reactive({
	dataListUrl: '/data-development/ScheduleGroup/page',
	deleteUrl: '/data-development/ScheduleGroup',
	queryForm: {
		groupName: '',
		groupOwner: ''
	},
	order: 'create_time',
	asc: false
})

const flowVisable = ref(false)

const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number, type?: string) => {
	addOrUpdateRef.value.init(id, type)
}
const cardDetailsTableHeight: any = ref()
// 动态设置表格高度
const getCardDetailsTableHeight = () => {
	let tableH = 260 //距离页面下方的高度
	let tableHeightDetil = window.innerHeight - tableH
	if (tableHeightDetil <= 100) {
		cardDetailsTableHeight.value = 100
	} else {
		cardDetailsTableHeight.value = window.innerHeight - tableH
	}
}
// 监听窗口变化动态设置表格高度
window.onresize = () => {
	getCardDetailsTableHeight()
}
onMounted(() => {
	getCardDetailsTableHeight()
})
const goToPage = (data: Object) => {
	router.push({
		path: '/data-development/schedule/index',
		query: {
			schedulerRroupId: data.id
		}
	})
}

const resets = () => {
	state.queryForm = {
		groupName: '',
		groupOwner: ''
	}

	state.page = 1
	state.limit = 10

	getDataList()
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteHandle } = useCrud(state)
</script>

<style lang="scss">
</style>
